JavaScript Stylesheet
Write styles in JavaScript for simpler component distribution.
Demo
Installation
npm install js-stylesheet
Or download jss.js
and include it into your app, it works with or
without common js modules.
Why JSS?
When you build generic components you often want to ship with some
default styles. Asking people to include some CSS file into their build
or prescribe some sort of loader can be cumbersome.
What if all they had to do was call a function to get your styles? No
loader/bundler prescriptions (like browserify or webpack) or SASS or
anything. Just a function.
This might be a terrible idea. If you already have done this and know
its terrible, please open an issue titled "Delete this repository".
Usage
jss({
'.any-selector': {
'font-size': '20px',
color: 'blue'
}
});
It's just JavaScript™, so you can use variables, etc. Check out the
example.
If you're shipping a component, you might attach a function to it that
your consumers call to inject the CSS.
var MyAmazingWidget = Embularactymerbone.createComponent({
});
MyAmazingWidget.injectCSS = function() {
jss({
});
};
Implementation
JSS takes your style declarations, parses them into CSS, and then
injects it into a shared <style/>
tag at the top of <head/>
. This
way consumers of your component can override your styles just like they
do native stuff.
Limitations
-
You'll probably get some FOUC if you do this with server side
rendering in React.
-
Injecting large numbers of styles could have bad performance, this is
not intended for use with your application styles, just components
that need a dozen lines or so to look half decent.